<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/health.css">
    <link rel="stylesheet" href="./css/common.css">
    <link rel="stylesheet" href="./css/notice.css">
    <link rel="stylesheet" href="./css/mine.css">
    <script src="./js/home.js"></script>

</head>

<body>
    <!-- 首页 -->
    <div class="mainTabContent ">
        <div class="header">
            <div class="headerBg"></div>
            <span class="pageName">优医问诊</span>
            <div class="searchInputBox">
                <input type="text" id="searchInput" placeholder="搜一搜：疾病/症状/医生/健康知识">
                <img class="searchIcon" src="./images/search_default@1x.png">
            </div>
        </div>
        <div class="contentWrapper">
            <div class="content">
                <!-- 三个关键功能入口 -->
                <div class="threeMainEntrance">
                    <div class="entranceItemBox">
                        <img src="./images/ask_doctor@1x.png" alt="">
                        <span>问医生</span>
                        <p>按科室查问医生</p>
                    </div>
                    <div class="entranceItemBox">
                        <img src="./images/inquiry_graphic@1x.png" alt="">
                        <span>急速问诊</span>
                        <p>20s医生急速回复</p>
                    </div>
                    <div class="entranceItemBox">
                        <img src="./images/inquiry_prescribe@1x.png" alt="">
                        <span>开药门诊</span>
                        <p>线上买药更方便</p>
                    </div>
                </div>
                <!-- 四个主要功能入口 -->
                <div class="fourEntrance">
                    <div class="entranceItem">
                        <img src="./images/drug_order@1x.png" alt="">
                        <span>药品订单</span>
                    </div>
                    <div class="entranceItem">
                        <img src="./images/health_records@1x.png" alt="">
                        <span>健康档案</span>
                    </div>
                    <div class="entranceItem">
                        <img src="./images/my_prescription@1x.png" alt="">
                        <span>我的处方</span>
                    </div>
                    <div class="entranceItem">
                        <img src="./images/disease_inquiry@1x.png" alt="">
                        <span>疾病查询</span>
                    </div>
                </div>
                <!-- 新人券 -->
                <img src="./images/coupon_banner@1x.png" alt="" class="couponBanner">
                <!-- 内容菜单tabbar -->
                <div class="contentTabMenu">
                    <div class="tabMenuItem focurse" onclick="choseTabbarItem(0)" id="menu0">
                        <span>
                            关注
                        </span>
                        <span>
                        </span>
                    </div>
                    <div class="tabMenuItem " onclick="choseTabbarItem(1)" id="menu1">
                        <span>
                            推荐
                        </span>
                        <span>
                        </span>
                    </div>
                    <div class="tabMenuItem" onclick="choseTabbarItem(2)" id="menu2">
                        <span>
                            护肤
                        </span>
                        <span>
                        </span>
                    </div>
                    <div class="tabMenuItem" onclick="choseTabbarItem(3)" id="menu3">
                        <span>
                            减脂
                        </span>
                        <span>
                        </span>
                    </div>
                    <div class="tabMenuItem" onclick="choseTabbarItem(4)" id="menu4">
                        <span>
                            饮食
                        </span>
                        <span>
                        </span>
                    </div>
                </div>
                <!-- 关注 -->
                <div class="tabContent active">
                    <div class="recommendFollow">
                        <div class="recommendTop">
                            <span>推荐关注</span>
                            <div>
                                <span>查看更多</span>
                                <img src="./images/chevron_right@1x-1.png" alt="">
                            </div>
                        </div>
                        <div class="recommendCardDiv">
                            <div class="recommendCardXDiv">

                                <div class="recommendCardXDivItem">
                                    <img src="https://img.loliapi.cn/i/pp/img122.webp" />
                                    <span>王医生</span>
                                    <p>积水潭医院 内分泌科</p>
                                    <p>主任医师</p>
                                    <div>+ 关注</div>
                                </div>
                                <div class="recommendCardXDivItem">
                                    <img src="https://img.loliapi.cn/i/pp/img132.webp" />
                                    <span>李医生</span>
                                    <p>积水潭医院 内分泌科</p>
                                    <p>主任医师</p>
                                    <div>+ 关注</div>
                                </div>
                                <div class="recommendCardXDivItem">
                                    <img src="https://img.loliapi.cn/i/pp/img152.webp" />
                                    <span>七七医生</span>
                                    <p>积水潭医院 内分泌科</p>
                                    <p>主任医师</p>
                                    <div>+ 关注</div>
                                </div>
                                <div class="recommendCardXDivItem">
                                    <img src="https://img.loliapi.cn/i/pp/img162.webp" />
                                    <span>孟婆医生</span>
                                    <p>积水潭医院 内分泌科</p>
                                    <p>主任医师</p>
                                    <div>+ 关注</div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                                <div class="doctorInfo">
                                    <span>王医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img120.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img121.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img123.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                                <div class="doctorInfo">
                                    <span>王医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img140.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img142.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img119.webp" />
                                <div class="doctorInfo">
                                    <span>李医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img145.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img109.webp" />
                                <div class="doctorInfo">
                                    <span>高医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img146.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img148.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 推荐 -->
                <div class="tabContent">
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img88.webp" />
                                <div class="doctorInfo">
                                    <span>七七医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">这是专门推荐的</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img12.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img13.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img14.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                                <div class="doctorInfo">
                                    <span>王医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img140.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img142.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img119.webp" />
                                <div class="doctorInfo">
                                    <span>李医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img145.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img109.webp" />
                                <div class="doctorInfo">
                                    <span>高医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img146.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img148.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 护肤 -->
                <div class="tabContent">
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img22.webp" />
                                <div class="doctorInfo">
                                    <span>孟婆医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">这是护肤的内容?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img23.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img24.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img25.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                                <div class="doctorInfo">
                                    <span>王医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img140.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img142.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img119.webp" />
                                <div class="doctorInfo">
                                    <span>李医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img145.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img109.webp" />
                                <div class="doctorInfo">
                                    <span>高医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img146.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img148.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 减脂 -->
                <div class="tabContent">
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img40.webp" />
                                <div class="doctorInfo">
                                    <span>晓月医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">这是关于减脂的内容</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img41.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img42.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img43.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                                <div class="doctorInfo">
                                    <span>王医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img140.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img142.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img119.webp" />
                                <div class="doctorInfo">
                                    <span>李医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img145.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img109.webp" />
                                <div class="doctorInfo">
                                    <span>高医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img146.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img148.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 饮食 -->
                <div class="tabContent">
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                                <div class="doctorInfo">
                                    <span>七个医生</span>
                                    <div><span>湘潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">这是关于饮食的帖子</div>
                                <div class="topic"># 饮食健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img120.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img121.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img123.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                                <div class="doctorInfo">
                                    <span>王医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img140.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img142.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img119.webp" />
                                <div class="doctorInfo">
                                    <span>李医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img145.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                    <div class="KnowledgeDiv">
                        <div class="KnowledgeCard">
                            <div class="doctorInfoDiv">
                                <img src="https://img.loliapi.cn/i/pp/img109.webp" />
                                <div class="doctorInfo">
                                    <span>高医生</span>
                                    <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                                </div>
                                <div class="optionDiv">
                                    +&nbsp;&nbsp;关注
                                </div>
                            </div>
                            <div class="articleTitieBox">
                                <div class="title">炎热夏季如何防晒?</div>
                                <div class="topic"># 儿童健康</div>
                            </div>
                            <div class="articleContent">
                                炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                            </div>
                            <div class="articleImgDiv">
                                <img src="https://img.loliapi.cn/i/pp/img146.webp" />
                                <img src="https://img.loliapi.cn/i/pp/img148.webp" />
                            </div>
                            <div class="articleData">
                                <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 健康百科 -->
    <div class="mainTabContent ">
        <div class="topNavDiv1">
            <div class="tndBox">
                <span>健康百科</span>
                <div>
                    <input type="text" placeholder="疾病/症状/医生/健康知识">
                    <img src="./images/search_default@1x.png" alt="">
                </div>
            </div>
            <div class="bgItem"></div>
        </div>
        <div class="mainContent1">
            <div class="trendingTopicsDiv1">
                <p class="title">热门话题</p>
                <div>
                    <div class="flexItem">
                        <img src="./images/健康饮食@1x.png" alt="">
                        <span>健康饮食</span>
                    </div>
                    <div class="flexItem"><img src="./images/母婴@1x.png" alt="">
                        <span>母婴</span>
                    </div>
                    <div class="flexItem"><img src="./images/减脂@1x.png" alt="">
                        <span>减脂</span>
                    </div>
                    <div class="flexItem"><img src="./images/运动@1x.png" alt="">
                        <span>运动</span>
                    </div>
                    <div class="flexItem"><img src="./images/慢性病@1x.png" alt="">
                        <span>慢性病</span>
                    </div>
                    <div class="flexItem"><img src="./images/child-avar.png" alt="">
                        <span>儿童健康</span>
                    </div>
                    <div class="flexItem"><img src="./images/心理健康@1x.png" alt="">
                        <span>心理健康</span>
                    </div>
                    <div class="flexItem"><img src="./images/医学常识@1x.png" alt="">
                        <span>医学常识</span>
                    </div>
                </div>
            </div>
            <!-- 内容菜单tabbar -->
            <div class="contentTabMenu1">
                <div class="tabMenuItem1 focurse" onclick="choseTabbar1Item(0)" id="menu10">
                    <span>
                        关注
                    </span>
                    <span>
                    </span>
                </div>
                <div class="tabMenuItem1 " onclick="choseTabbar1Item(1)" id="menu11">
                    <span>
                        推荐
                    </span>
                    <span>
                    </span>
                </div>
            </div>
            <!-- 关注 -->
            <div class="tabContent1 active">
                <div class="KnowledgeDiv">
                    <div class="KnowledgeCard">
                        <div class="doctorInfoDiv">
                            <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                            <div class="doctorInfo">
                                <span>王医生</span>
                                <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                            </div>
                            <div class="optionDiv">
                                +&nbsp;&nbsp;关注
                            </div>
                        </div>
                        <div class="articleTitieBox">
                            <div class="title">炎热夏季如何防晒?</div>
                            <div class="topic"># 儿童健康</div>
                        </div>
                        <div class="articleContent">
                            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                        </div>
                        <div class="articleImgDiv">
                            <img src="https://img.loliapi.cn/i/pp/img120.webp" />
                            <img src="https://img.loliapi.cn/i/pp/img121.webp" />
                            <img src="https://img.loliapi.cn/i/pp/img123.webp" />
                        </div>
                        <div class="articleData">
                            <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                        </div>
                    </div>
                </div>
                <div class="KnowledgeDiv">
                    <div class="KnowledgeCard">
                        <div class="doctorInfoDiv">
                            <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                            <div class="doctorInfo">
                                <span>王医生</span>
                                <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                            </div>
                            <div class="optionDiv">
                                +&nbsp;&nbsp;关注
                            </div>
                        </div>
                        <div class="articleTitieBox">
                            <div class="title">炎热夏季如何防晒?</div>
                            <div class="topic"># 儿童健康</div>
                        </div>
                        <div class="articleContent">
                            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                        </div>
                        <div class="articleImgDiv">
                            <img src="https://img.loliapi.cn/i/pp/img140.webp" />
                            <img src="https://img.loliapi.cn/i/pp/img142.webp" />
                        </div>
                        <div class="articleData">
                            <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                        </div>
                    </div>
                </div>
                <div class="KnowledgeDiv">
                    <div class="KnowledgeCard">
                        <div class="doctorInfoDiv">
                            <img src="https://img.loliapi.cn/i/pp/img119.webp" />
                            <div class="doctorInfo">
                                <span>李医生</span>
                                <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                            </div>
                            <div class="optionDiv">
                                +&nbsp;&nbsp;关注
                            </div>
                        </div>
                        <div class="articleTitieBox">
                            <div class="title">炎热夏季如何防晒?</div>
                            <div class="topic"># 儿童健康</div>
                        </div>
                        <div class="articleContent">
                            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                        </div>
                        <div class="articleImgDiv">
                            <img src="https://img.loliapi.cn/i/pp/img145.webp" />
                        </div>
                        <div class="articleData">
                            <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                        </div>
                    </div>
                </div>
                <div class="KnowledgeDiv">
                    <div class="KnowledgeCard">
                        <div class="doctorInfoDiv">
                            <img src="https://img.loliapi.cn/i/pp/img109.webp" />
                            <div class="doctorInfo">
                                <span>高医生</span>
                                <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                            </div>
                            <div class="optionDiv">
                                +&nbsp;&nbsp;关注
                            </div>
                        </div>
                        <div class="articleTitieBox">
                            <div class="title">炎热夏季如何防晒?</div>
                            <div class="topic"># 儿童健康</div>
                        </div>
                        <div class="articleContent">
                            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                        </div>
                        <div class="articleImgDiv">
                            <img src="https://img.loliapi.cn/i/pp/img146.webp" />
                            <img src="https://img.loliapi.cn/i/pp/img148.webp" />
                        </div>
                        <div class="articleData">
                            <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 推荐 -->
            <div class="tabContent1">
                <div class="KnowledgeDiv">
                    <div class="KnowledgeCard">
                        <div class="doctorInfoDiv">
                            <img src="https://img.loliapi.cn/i/pp/img88.webp" />
                            <div class="doctorInfo">
                                <span>七七医生</span>
                                <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                            </div>
                            <div class="optionDiv">
                                +&nbsp;&nbsp;关注
                            </div>
                        </div>
                        <div class="articleTitieBox">
                            <div class="title">这是专门推荐的</div>
                            <div class="topic"># 儿童健康</div>
                        </div>
                        <div class="articleContent">
                            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                        </div>
                        <div class="articleImgDiv">
                            <img src="https://img.loliapi.cn/i/pp/img12.webp" />
                            <img src="https://img.loliapi.cn/i/pp/img13.webp" />
                            <img src="https://img.loliapi.cn/i/pp/img14.webp" />
                        </div>
                        <div class="articleData">
                            <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                        </div>
                    </div>
                </div>
                <div class="KnowledgeDiv">
                    <div class="KnowledgeCard">
                        <div class="doctorInfoDiv">
                            <img src="https://img.loliapi.cn/i/pp/img139.webp" />
                            <div class="doctorInfo">
                                <span>王医生</span>
                                <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                            </div>
                            <div class="optionDiv">
                                +&nbsp;&nbsp;关注
                            </div>
                        </div>
                        <div class="articleTitieBox">
                            <div class="title">炎热夏季如何防晒?</div>
                            <div class="topic"># 儿童健康</div>
                        </div>
                        <div class="articleContent">
                            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                        </div>
                        <div class="articleImgDiv">
                            <img src="https://img.loliapi.cn/i/pp/img140.webp" />
                            <img src="https://img.loliapi.cn/i/pp/img142.webp" />
                        </div>
                        <div class="articleData">
                            <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                        </div>
                    </div>
                </div>
                <div class="KnowledgeDiv">
                    <div class="KnowledgeCard">
                        <div class="doctorInfoDiv">
                            <img src="https://img.loliapi.cn/i/pp/img119.webp" />
                            <div class="doctorInfo">
                                <span>李医生</span>
                                <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                            </div>
                            <div class="optionDiv">
                                +&nbsp;&nbsp;关注
                            </div>
                        </div>
                        <div class="articleTitieBox">
                            <div class="title">炎热夏季如何防晒?</div>
                            <div class="topic"># 儿童健康</div>
                        </div>
                        <div class="articleContent">
                            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                        </div>
                        <div class="articleImgDiv">
                            <img src="https://img.loliapi.cn/i/pp/img145.webp" />
                        </div>
                        <div class="articleData">
                            <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                        </div>
                    </div>
                </div>
                <div class="KnowledgeDiv">
                    <div class="KnowledgeCard">
                        <div class="doctorInfoDiv">
                            <img src="https://img.loliapi.cn/i/pp/img109.webp" />
                            <div class="doctorInfo">
                                <span>高医生</span>
                                <div><span>积水潭医院</span><span>积水潭医院</span><span>积水潭医院</span></div>
                            </div>
                            <div class="optionDiv">
                                +&nbsp;&nbsp;关注
                            </div>
                        </div>
                        <div class="articleTitieBox">
                            <div class="title">炎热夏季如何防晒?</div>
                            <div class="topic"># 儿童健康</div>
                        </div>
                        <div class="articleContent">
                            炎热的夏季，那大太阳无时不刻在考验着我们的肌肤，过强、过多的阳光中紫外线的…
                        </div>
                        <div class="articleImgDiv">
                            <img src="https://img.loliapi.cn/i/pp/img146.webp" />
                            <img src="https://img.loliapi.cn/i/pp/img148.webp" />
                        </div>
                        <div class="articleData">
                            <span>12收藏&nbsp;</span>&nbsp;&nbsp;<span>120&nbsp;点赞</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 消息通知 -->
    <div class="mainTabContent">
        <div class="topNavDiv2">
            <div class="titleDiv">
                <span>消息</span>
                <img src="./images/clear_message.png" alt="">
                <span>清除未读</span>
            </div>
        </div>
        <div class="messageFlexBox">
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img220.webp" />
                <div class="columDiv">
                    <p>
                        <span>张仲景</span>
                        <span>5分钟前</span>
                    </p>
                    <p>建议服用桂枝汤调理风寒，早晚各一次</p>
                </div>
                <div class="dotNotice">2</div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img233.webp" />
                <div class="columDiv">
                    <p>
                        <span>李时珍</span>
                        <span>2023-10-15 09:20</span>
                    </p>
                    <p>可尝试本草纲目记载的金银花配方降火</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img232.webp" />
                <div class="columDiv">
                    <p>
                        <span>孙思邈</span>
                        <span>1小时前</span>
                    </p>
                    <p>需要配合艾灸足三里增强脾胃功能</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img231.webp" />
                <div class="columDiv">
                    <p>
                        <span>扁鹊</span>
                        <span>2023-10-14 16:45</span>
                    </p>
                    <p>建议进行脉象复查，明日安排针灸治疗</p>
                </div>
                <div class="dotNotice">···</div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img230.webp" />
                <div class="columDiv">
                    <p>
                        <span>王叔和</span>
                        <span>30分钟前</span>
                    </p>
                    <p>脉案已更新，需减少油腻饮食</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img229.webp" />
                <div class="columDiv">
                    <p>
                        <span>皇甫谧</span>
                        <span>2023-10-13 10:30</span>
                    </p>
                    <p>针灸甲乙经方案已发送，请注意查收</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img228.webp" />
                <div class="columDiv">
                    <p>
                        <span>葛洪</span>
                        <span>45分钟前</span>
                    </p>
                    <p>急方备急，突发高热可用此方退烧</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img227.webp" />
                <div class="columDiv">
                    <p>
                        <span>钱乙</span>
                        <span>3小时前</span>
                    </p>
                    <p>小儿药证直诀药方需调整剂量</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img226.webp" />
                <div class="columDiv">
                    <p>
                        <span>朱震亨</span>
                        <span>2023-10-12 14:15</span>
                    </p>
                    <p>滋阴降火，建议服用大补阴丸</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img225.webp" />
                <div class="columDiv">
                    <p>
                        <span>叶天士</span>
                        <span>15分钟前</span>
                    </p>
                    <p>温热论外感方案已修订，注意避风</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img224.webp" />
                <div class="columDiv">
                    <p>
                        <span>吴鞠通</span>
                        <span>2023-10-11 08:00</span>
                    </p>
                    <p>按温病条辨方剂调整，三碗水煎成一碗</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img223.webp" />
                <div class="columDiv">
                    <p>
                        <span>薛生白</span>
                        <span>1天前</span>
                    </p>
                    <p>湿热病篇方案，忌食生冷食物</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img222.webp" />
                <div class="columDiv">
                    <p>
                        <span>程钟龄</span>
                        <span>2小时前</span>
                    </p>
                    <p>医学心悟方剂，注意服药后反应</p>
                </div>
            </div>
            <div class="messageItemBox">
                <img src="https://img.loliapi.cn/i/pp/img221.webp" />
                <div class="columDiv">
                    <p>
                        <span>汪昂</span>
                        <span>2023-10-10 17:30</span>
                    </p>
                    <p>本草备要记载的茯苓用法已备注</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 我的 -->
    <div class="mainTabContent mainTabActive">
        <div class="mineTopDiv">
            <div class="userBox">
                <div class="dataFlexDiv">
                    <div class="dataFlexDivItem">
                        <span>93</span>
                        <span>收藏</span>
                    </div>
                    <div class="dataFlexDivItem">
                        <span>23</span>
                        <span>关注</span>
                    </div>
                    <div class="dataFlexDivItem">
                        <span>287</span>
                        <span>积分</span>
                    </div>
                    <div class="dataFlexDivItem">
                        <span>6</span>
                        <span>优惠劵</span>
                    </div>
                </div>
                <img src="https://img.loliapi.cn/i/pp/img1.webp" class="avatar" />
                <span class="username">茄子忍者烧纸尿裤</span>
                <img src="./images/edit_userInfo.png" class="editIcon" alt="">
            </div>
        </div>
        <div class="mineFlexScroll">
            <div class="card stateCard">
                <span class="title">问诊中</span>
                <div class="doctorInfo">
                    <img class="doctorAvatar" src="https://img.loliapi.cn/i/pp/img2.webp" />
                    <div class="doctorTextInfo">
                        <p><span>王医生</span><span>内分泌科 | 主任医师</span></p>
                        <p><span>三甲</span><span>积水潭医院</span></p>
                    </div>
                    <div class="consultButton">进入咨询</div>
                </div>
                <ul class="bottomDotUl">
                    <li></li>
                    <li></li>
                </ul>
            </div>
            <div class="card drugOrderCard">
                <span class="title">药品订单</span>
                <span class="allOrder">全部订单</span>
                <img class="rightArrow" src="./images/chevron_right@1x-1.png" alt="">
                <div class="drugFlexDiv">
                    <div class="flexItem">
                        <img src="./images/To_be_paid@1x.png" alt="">
                        <span>待付款</span>
                    </div>
                                        <div class="flexItem">
                        <img src="./images/To_be_shipped@1x.png" alt="">
                        <span>待发货</span>
                    </div>
                                        <div class="flexItem">
                        <img src="./images/To_be_received@1x.png" alt="">
                        <span>待收货</span>
                    </div>
                                        <div class="flexItem">
                        <img src="./images/finished@1x.png" alt="">
                        <span>已完成</span>
                    </div>
                </div>
            </div>
            <div class="card quickToolCard">
                <span class="title">快捷订单</span>
                <div class="toolFlexBox">
                    <div class="toolFlexItem">
                        <img src="./images/tool1.png" alt="" class="toolIcon">
                        <p>我的问诊</p>
                        <img src="./images/chevron_right@1x-1.png" alt="" class="rightArrow">
                    </div>
                                        <div class="toolFlexItem">
                        <img src="./images/tool2.png" alt="" class="toolIcon">
                        <p>我的处方</p>
                        <img src="./images/chevron_right@1x-1.png" alt="" class="rightArrow">
                    </div>
                                        <div class="toolFlexItem">
                        <img src="./images/tool3.png" alt="" class="toolIcon">
                        <p>家庭档案</p>
                        <img src="./images/chevron_right@1x-1.png" alt="" class="rightArrow">
                    </div>
                                        <div class="toolFlexItem">
                        <img src="./images/tool4.png" alt="" class="toolIcon">
                        <p>地址管理</p>
                        <img src="./images/chevron_right@1x-1.png" alt="" class="rightArrow">
                    </div>
                                        <div class="toolFlexItem">
                        <img src="./images/tool5.png" alt="" class="toolIcon">
                        <p>我的评价</p>
                        <img src="./images/chevron_right@1x-1.png" alt="" class="rightArrow">
                    </div>
                                        <div class="toolFlexItem">
                        <img src="./images/tool6.png" alt="" class="toolIcon">
                        <p>官方客服</p>
                        <img src="./images/chevron_right@1x-1.png" alt="" class="rightArrow">
                    </div>
                                        <div class="toolFlexItem">
                        <img src="./images/tool7.png" alt="" class="toolIcon">
                        <p>设置</p>
                        <img src="./images/chevron_right@1x-1.png" alt="" class="rightArrow">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部搜索栏 -->
    <div class="tabbar">
        <div class="tabbarItem" onclick="mainTabChange(0)">
            <div class="tabIcon "></div>
            <span>首页</span>
        </div>
        <div class="tabbarItem " onclick="mainTabChange(1)">
            <div class="tabIcon "></div>
            <span>健康百科</span>
        </div>
        <div class="tabbarItem " onclick="mainTabChange(2)">
            <div class="tabIcon "></div>
            <span>消息通知</span>
        </div>
        <div class="tabbarItem active" onclick="mainTabChange(3)">
            <div class="tabIcon "></div>
            <span>我的</span>
        </div>
    </div>
</body>

</html>